<!--
 * @Descripttion: 退签详情
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-20 14:39:20
 * @LastEditTime: 2022-03-31 14:15:52
-->
<template>
  <div class="order-detail" v-if="Object.keys(detailMsg).length">
    <!--订单信息-->
    <order-msg
      :detailMsg="detailMsg"
      :businessId="businessId"
      :orderStatusName="orderStatusName"
      @onGetOrderDetail="getRefundOrderDetail"></order-msg>
    <div class="order-content" ref="orderContent">
      <Tabs type="card" v-model="showTab">
        <TabPane label="退签详情" name="orderDetail">
          <div class="sub-detail">
            <!--提示信息-->
            <slot-msg
              :buildingId="buildingId"
              :detailMsg="detailMsg"
              :orderStatusName="orderStatusName"></slot-msg>
            <!--退签信息-->
            <order-status-msg :detailMsg="detailMsg" :orderStatusName="orderStatusName"></order-status-msg>
            <!--房源信息-->
            <room-msg :detailMsg="detailMsg" :orderStatusName="orderStatusName"></room-msg>
            <!--客户信息-->
            <customer-msg :detailMsg="detailMsg"></customer-msg>
            <!--签约信息-->
            <contract-msg :buildingId="buildingId" :detailMsg="detailMsg"></contract-msg>
            <!--付款信息-->
            <payment-msg :detailMsg="detailMsg"></payment-msg>
            <!--认购人信息-->
            <contractor-msg
              :buildingId="buildingId"
              :detailMsg="detailMsg"
              :orderStatusName="orderStatusName"
              :isSub="true"></contractor-msg>
            <!--签约人信息-->
            <contractor-msg
              :buildingId="buildingId"
              :detailMsg="detailMsg"
              :orderStatusName="orderStatusName"></contractor-msg>
            <!--交房信息-->
            <delivery-msg :detailMsg="detailMsg" :orderStatusName="orderStatusName"></delivery-msg>
            <!--关联订单-->
            <link-order :buildingId="buildingId" :detailMsg="detailMsg"></link-order>
          </div>
        </TabPane>
        <TabPane label="操作记录" name="orderOperate">
          <operate-msg :code="code" :buildingId="buildingId" v-if="showTab == 'orderOperate'"></operate-msg>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>
<script>
  import refundMgr from '@/biz/sales/refundOrder'
  import orderMsg from '../components/orderMsg.vue'
  import slotMsg from '../components/slotIMsg.vue'
  import orderStatusMsg from '../components/orderStatusMsg.vue'
  import roomMsg from '../components/roomMsg.vue'
  import customerMsg from '../components/customerMsg.vue'
  import contractMsg from '../components/contractMsg.vue'
  import paymentMsg from '../components/paymentMsg.vue'
  import deliveryMsg from '../components/deliveryMsg.vue'
  import contractorMsg from '../components/contractorMsg.vue'
  import linkOrder from '../components/linkOrder.vue'
  import operateMsg from '../components/operateMsg.vue'
  import watermark from '@/common/waterMark'
  import dt from '@dt/dt'
  export default {
    components: {
      orderMsg,
      slotMsg,
      roomMsg,
      operateMsg,
      contractorMsg,
      linkOrder,
      contractMsg,
      orderStatusMsg,
      customerMsg,
      paymentMsg,
      deliveryMsg
    },
    data() {
      return {
        showTab: 'orderDetail',
        detailMsg: {},
        businessId: '',
        orderStatusName: '退签',
        code: '',
        buildingId: ''
      }
    },
    watch: {
      showTab(val, oldVal) {
        if (val) {
          this.code = this.detailMsg.orContractBaseInfoVO.contractCode
        }
      }
    },
    created() {
      let detailParams = this.$route.query

      this.businessId = detailParams.businessId

      this.showTab = detailParams.showTab

      this.buildingId = detailParams.buildingId

      console.log(detailParams, 'detailParams1')
    },
    mounted() {
      watermark.set()
      this.getRefundOrderDetail()
    },
    methods: {
      // 获取订单详情
      getRefundOrderDetail() {
        this.detailMsg = {}
        let params = {
          id: this.businessId
        }
        refundMgr
          .getRefundOrderDetail(params)
          .then((res) => {
            console.log(res, '我是订单详情')
            this.detailMsg = { ...res }
            watermark.set()
          })
          .catch((res) => {
            this.detailMsg = {}
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .order-detail {
    padding: 20px;
    font-size: 16px;

    .order-content {
      margin-top: 30px;

      .sub-detail {
        padding: 20px 100px;
        max-height: 650px;
        overflow-y: auto;
      }

      ::v-deep .ivu-tabs-content {
        height: 100%;

        .title {
          margin-top: 20px;
          font-size: 20px;
          color: #333;
        }
      }
    }
  }
</style>
